<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="css/public.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <style>
        .layui-table-cell {
            height: inherit;
        }
    </style>
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md8">

            <div class="layui-carousel" id="test3" lay-filter="test4">
                <div carousel-item="" id="abcd">
                    <!--<div><img src="http://rs.hasbei.com/imagesbg/7eebfc0cd47a49bea45f7dffa3acb0ad.jpg"></div>
                    <div><img src="http://rs.hasbei.com/imagesbg/7eebfc0cd47a49bea45f7dffa3acb0ad.jpg"></div>
                    <div><img src="http://rs.hasbei.com/imagesbg/7eebfc0cd47a49bea45f7dffa3acb0ad.jpg"></div>-->
                    <!--<div id="img-list" th:replace="~{page/banner/carousel :: carousel-div}"></div>-->

                    <!--<div id="img-list" th:replace="page/banner/carousel :: copy"></div>-->
                </div>
            </div>

        </div>
        <div class="layui-col-xs6 layui-col-md4">

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>设定各种参数</legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">宽高</label>
                        <div class="layui-input-inline" style="width: 98px;">
                            <input type="tel" name="width" value="778" autocomplete="off" placeholder="width" class="layui-input demoSet">
                        </div>
                        <div class="layui-input-inline" style="width: 98px;">
                            <input type="tel" name="height" value="440" autocomplete="off" placeholder="height" class="layui-input demoSet">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">动画类型</label>
                    <div class="layui-input-block">
                        <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="anim" data-value="default">左右切换</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="updown">上下切换</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="fade">渐隐渐显</button>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">箭头状态</label>
                    <div class="layui-input-block">
                        <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="arrow" data-value="hover">悬停显示</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="always">始终显示</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="none">不显示</button>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">指示器位置</label>
                    <div class="layui-input-block">
                        <div class="layui-btn-group demoTest" style="margin-top: 5px;">
                            <button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-key="indicator" data-type="set" data-value="inside">容器内部</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="outside">容器外部</button>
                            <button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="none">不显示</button>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">自动切换</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="switch" lay-skin="switch" checked="" lay-text="ON|OFF" lay-filter="autoplay">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto;">时间间隔</label>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="tel" name="interval" value="100" autocomplete="off" placeholder="毫秒" class="layui-input demoSet">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--图片管理 ,表格-->
<div class="x-body">
    <table id="demo" class="layui-table" lay-filter="demo"></table>
</div>


<!--toolbar :头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>

<!--tool :右侧工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>

<!--开关-->
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|未启用" lay-filter="sexDemo" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<!--新增-->
<form class="layui-form" id="test" style="display:none">

    <div class="layui-upload">
        <div class="layui-upload-list">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <img class="layui-upload-img" id="demo1" width="120" height="70">
            <p id="demoText"></p>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片名称</label>
        <div class="layui-input-block">
            <input type="text" name="pname" required  lay-verify="required" placeholder="请输入名称" autocomplete="on" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片类型</label>
        <div class="layui-input-block" placeholder="请选择名称" style="width:150px">
            <select name="type" lay-filter="aihao">
                <option value="0">首页轮播图</option>
                <option value="1">其他轮播图</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭">
        </div>
    </div>

    <div class="layui-form-item" style="display: none">
        <div class="layui-input-block">
            <button class="layui-btn layui-layer-btn0" lay-submit lay-filter="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>

<!--修改-->
<form class="layui-form" id="edit1" style="display:none" lay-filter="formCarouselEdit">

    <input type="hidden" name="id" id="edit-id" required  lay-verify="required"  autocomplete="on" class="layui-input" >

    <div class="layui-form-item">
        <label class="layui-form-label">图片名称</label>
        <div class="layui-input-block">
            <input type="text" name="pname" id="edit-pname" required  lay-verify="required" placeholder="请输入名称" autocomplete="on" class="layui-input" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片类型</label>
        <div class="layui-input-block" placeholder="请选择名称" style="width:150px">
            <select name="type" lay-filter="aihao" id="edit-type">
                <option value="0">首页轮播图</option>
                <option value="1">其他轮播图</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input type="text" name="description" id="edit-desc" required  lay-verify="required" placeholder="请输入描述" autocomplete="on" class="layui-input" >
        </div>
    </div>

</form>

<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="api/baseApi.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script th:inline="none">
    window.onload=function(){


    layui.use(['carousel', 'form','table','upload'], function(){
        var carousel = layui.carousel
            ,form = layui.form
        ,table = layui.table
        ,$ = layui.$
        ,upload = layui.upload;

        //第一个实例
        table.render({
            elem: '#demo'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print']//自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            ,url: baseUrl + carouselBaseUrl +'listTable'  //数据接口
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left' }
                ,{field: 'id', title: 'ID', width:100, sort: true, fixed: 'left'}
                ,{field: 'pname', title: '名称', width:160}
                ,{field: 'src', title: '图片', width:300 , templet: function(d){
                        /*return '<img class="table-img" src='+d.src+' />';*/
                        return '<img  width="45" height="25" src='+d.src+' />';
                    }}
                ,{field: 'type', title: '类型', width:120,templet:function(d){
                        if(d.type == 0){
                            return '<span>首页轮播图</span>';
                        }else{
                            return '其他';
                        }
                    }}
                ,{field: 'createTime', title: '创建时间', width:160 }
                ,{field: 'updateTime', title: '修改时间', width:160 }
                ,{field: 'description', title: '描述', width:300}
                ,{field: 'status', title: '状态', width:120 ,templet: '#switchTpl'}
                ,{templet: '#auth-state', width: 200, align: 'center', title: '操作' ,toolbar: '#barDemo'}
            ]],
            text: {
                none: '暂无相关数据或权限不够'
            }
        });


        //监听右侧工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
              if (layEvent === 'edit') {
                  editCarousel(data);
                  //layer.msg("正在制作中~~~")
              }
        });

        //监听状态开关操作
        form.on('switch(sexDemo)', function(obj){
            var id = this.value; // 当行ID
            var status = this.checked ? '1' : '0'; // 选中状态
            var data ={id,status}
            $.ajax({
                url: baseUrl + carouselBaseUrl ,
                type:'put',
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(data),
                success:function (resp) {
                    getList();
                    layer.msg(resp.msg)

                },
                error: function(resp){
                    layer.msg(resp.msg)
                }

            })
        });

        //头工具栏事件
        table.on('toolbar(demo)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'add':
                    layer.msg("正在制作中...")
                    addCarousel(obj.data);
                    break;
            };
        });

        //添加
        function addCarousel(data){
            layer.open({
                type:1,
                area:['600px','400px'],
                title: '新增'
                ,content: $("#test"),
                shade: 0,
                btn: ['提交', '重置'],
                success : function(layero, index) {
                    layero.addClass('layui-form');
                    layero.find('.layui-layer-btn0').attr({
                        'lay-filter':'addBanner',
                        'lay-submit':''
                    })
                }
                ,btn1: function(index, layero){
                    form.on('submit(addBanner)',function(data){
                        console.log(data)
                    })
                },
                btn2: function(index, layero){
                    return false;
                },
                cancel: function(layero,index){
                    layer.closeAll();
                }
            });
        }

        //编辑
        function editCarousel(data){
            //给表单赋值回显
            form.val('formCarouselEdit',data);

            layer.open({
                type:1,
                area:['600px','400px'],
                title: '编辑'
                ,content: $("#edit1"),
                shade: 0,
                btn: ['提交', '重置']
                ,btn1: function(index, layero){
                    var obj ={
                        id : $('#edit-id').val(),
                        pname: $('#edit-pname').val(),
                        type: $('#edit-type').val(),
                        description: $('#edit-desc').val()
                    }
                    $.ajax({
                        url: baseUrl + carouselBaseUrl,
                        type: 'put',
                        dataType: 'json',
                        contentType: "application/json;charset=UTF-8",
                        data: JSON.stringify(obj),
                        success:function(res){
                            layer.msg(res.msg)
                        }
                    })
                    layer.close(index);
                    parent.location.reload();
                },
                btn2: function(index, layero){
                    $('#edit-pname').val("")
                        $('#edit-type').val("0")
                            $('#edit-desc').val("")

                    return false;
                },
                cancel: function(layero,index){
                    layer.closeAll();
                }
            });
        }


        //渲染轮播图
        function getList(){
            $.ajax({
                url: baseUrl + carouselBaseUrl + 'list',
                type:'post',
                data: null,
                success:function (res) {
                    let list = res.data.data;
                    var str = "";
                    for(j = 0; j < list.length; j++){
                        if(j == 0){
                            str += '<div width="778" height="440" class="layui-this"><img src="'+list[j].src+'"></div>'
                        }else{
                            str += '<div ><img width="778" height="440" src="'+list[j].src+'"></div>'
                        }
                    }
                    $("#abcd").html(str);

                    //console.log(res);
                    //$("#abcd").html(res);
                }
            })
        }
        getList();


        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: baseUrl + carouselBaseUrl + 'upload' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });


        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '778px'
            ,height: '440px'
            ,interval: 500
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
    }
</script>

</body>
</html>